<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>文化圈</title>
    <link rel="stylesheet" type="text/css" href="../lib/swiper/css/swiper.min.css"/>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/common-list.css">
    <script src="../lib/autoSize.js"></script>
</head>

<body>
<header>
    <div class="left-btn">
        <img class="back" src="../images/header/back.png" alt="" onclick="history.go(-1)">
    </div>
    <h1 class="">文化圈</h1>
    <div class="right-btn">
        <!-- 此处写右边按钮-->
    </div>
</header>
<main>
    <div id="commonList">
        <script type="text/html" id="listTemp">
            {{each}}
            <div class="list-item {{$value.pictures | getListType}} fadeInUp" data-url="w_detail.jsp?id={{$value.id}}&title={{$value.titleName}}">
                <h2 class="title">{{$value.titleName}}</h2>
                <div class="img">
                    {{@ $value.pictures | getListImg}}
                </div>
                <div class="desc">
                    <span class="source">{{$value.source}}</span>
                    <span class="time">{{$value.createTime}}</span>
                    <span class="view">12</span>
                </div>
            </div>
            {{/each}}
        </script>
        <div class="list-item no-img" style="display: none">
            <h2 class="title">大水冲了龙王庙</h2>
            <div class="img"></div>
            <div class="desc">
                <span class="source">来源</span>
                <span class="time">2016-10-12 12:12</span>
                <span class="view">12</span>
            </div>
        </div>
        <div class="list-item single-img">
            <h2 class="title">大水冲了龙王庙</h2>
            <div class="img">
                <img src="" alt="">
            </div>
            <div class="desc">
                <span class="source">来源</span>
                <span class="time">2016-10-12 12:12</span>
                <span class="view">12</span>
            </div>
        </div>
        <div class="list-item multi-img">
            <h2 class="title">大水冲了龙王庙大水冲了龙王庙大水冲了龙王庙大水冲了龙王庙大水冲了龙王庙</h2>
            <div class="img">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
            </div>
            <div class="desc">
                <span class="source">来源</span>
                <span class="time">2016-10-12 12:12</span>
                <span class="view">12</span>
            </div>
        </div>
    </div>
</main>
<footer></footer>

<script src="../lib/jquery-3.2.1.min.js"></script>
<script src="../lib/swiper/js/swiper.jquery.min.js"></script>
<script src="../lib/template-web.js"></script>
<script src="../lib/fastclick.js"></script>
<script src="../lib/layer.js"></script>
<script src="../js/common.js"></script>
<script src="../js/jquery.list.js"></script>

<script>
    $(function () {
        FastClick.attach(document.body);
    });

    template.defaults.imports.getListType=function (pictures) {
        if(pictures){
            pictures=JSON.parse(pictures);
            if(pictures.length>=3){
                return 'multi-img'
            }else if(pictures.length>=1){
                return 'single-img'
            }else {
                return 'no-img'
            }
        }else {
            return 'no-img'
        }
    };
    template.defaults.imports.getListImg=function (pictures) {
        if(pictures){
            pictures=JSON.parse(pictures);
            if(pictures.length>=3){
                return '<img src="'+CONFIG.IMAGE_RESOURCES_ADDRESS+pictures[0].pic+'" onerror="this.src=\'../images/error.png\'">'+
                    '<img src="'+CONFIG.IMAGE_RESOURCES_ADDRESS+pictures[0].pic+'" onerror="this.src=\'../images/error.png\'">'+
                    '<img src="'+CONFIG.IMAGE_RESOURCES_ADDRESS+pictures[0].pic+'" onerror="this.src=\'../images/error.png\'">'
            }else if(pictures.length>=1){
                return '<img src="'+CONFIG.IMAGE_RESOURCES_ADDRESS+pictures[0].pic+'" onerror="this.src=\'../images/error.png\'">'
            }else {
                return ''
            }
        }else {
            return ''
        }
    };
    //使用 data-url 跳转
    tools.goSkip();

    var menuId=tools.getUrlParam('menuId') || '11011345247120132' ;

    $('#listTemp').renderDataList({
        params:{
            'menuId':'11011345247120132',
            'stairColumnId':'11031000348510002',
            'pageSize':5
        }
    })
//    API.getDataList('culturalCloudContentServiceListV10',menuId,0,10,renderList());
//    function render(data) {
//
//    }
</script>
</body>

</html>